<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>    
<%@ include  file="../init.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>找回密码</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
		<link rel="stylesheet" type="text/css" href="${resources}/css/resetPassword.css">
	</head>
	
<style>
.easebuy-m .smt {
	font-size: 14px;
	min-height: 300px;
	height:auto;
}

.mt .title{
	font-size: 16px;
	font-weight: 900;
	padding: 10px;
	border-left: 3px solid #FF6666;
}

#edit-cont .item .label {
	float: none;
	display: block;
	vertical-align: middle;
	color: #999;
	text-align: left;
}


.item span.label {
	height: 30px;
	line-height: 18px;
	padding: 6px 0;
	width: 100px;
}

#edit-cont .item .error-msg {
color: #c00;
line-height: 32px;
}

#edit-cont .item .text {
height: 30px;
line-height: 18px;
padding: 6px;
width: 220px;
margin-right: 5px;
vertical-align: middle;
border: 1px solid #ccc;
}

#edit-cont .item .text1 {
width: 484px;
}

#edit-cont em {
padding-right:5px;
color: #e4393c;
}


#edit-cont .item .sele {
width: auto;
margin-right: 10px;
line-height: 18px;
border: 1px solid #ccc;
padding: 5px;
float: none;
}



.form_group{

}

.form_item{
	width:600px;
	margin:auto;
	height:60px;
}



.form_group .form_item label{
	float: left;
	width: 150px;
	text-align: right;
	padding: 0px 20px;
	height: 50px;
	line-height: 50px;
	color: #333;
}

.form_group .form_item p{
	float: left;
	height: 50px;
	line-height: 50px;
	font-size: 12px;
	color: #c40000!important;

}

.form_group .form_item span{
	padding:5px;
	color:#c40000!important;
	font-weight: 900;
}


.form_group .form_item .tex_input {
	float: left;
	width: 200px;
	height: 40px;
	margin: 5px 10px;
	padding: 0px 10px;
	text-align: left;
	border-radius: 5px;
	border: 1px solid #CCC;
	font-size: 16px;
}

.form_group .form_item .tex_code{
	float: left;
	width: 90px;
	height: 40px;
	margin: 5px 10px;
	padding: 0px 10px;
	text-align: left;
	border-radius: 5px;
	border: 1px solid #CCC;
	font-size: 16px;
}

.form_group .form_item .btn_code{
	float: left;
	width: 95px;
	height: 40px;
	margin: 5px;
	padding: 0px 5px;
	text-align: center;
	border-radius: 34px;
	border: none;
	color: #FFF;
	background: #FF9900;
}

.form_group .form_item .btn_submit{
	width: 240px;
	height: 44px;
	text-align: center;
	margin: auto;
	background: #0099cc;
	border: none;
	color: #FFF;
	font-size: 16px;
	font-weight: 900;
	border-radius: 30px;
}

.form_group .form_item .message_error{
	float: left;
	width: 200px;
	height: 40px;
	line-height: 40px;
	padding: 0px 10px;
	color: #c40000!important;
}

.form_group .form_item .message_error span{
	padding-left: 10px;
}

.form_title{
	height: 55px;
	line-height: 50px;
	padding: 10px 0px;
	font-size: 16px;
	font-weight: 700;
	border-bottom: 2px solid #CCC;
	color: #666;
	margin-bottom: 20px;
}

.form_title span{
	border-left: 3px solid #FF6666;
	padding-left: 20px;
	color: #333;
	font-size: 18px;
}


</style>	  	
<body>
	<%@ include  file="../header_1.jsp"%>
 <div class="container">
      <div class="row"> 
         <div class="col-md-11"> 
	 <!-- container begin -->
					<div id="container">
						<div class="w">
							<div id="content">
				
								<div style="width:100%;min-height:500px;background:#eee;padding:20px;">
									<div style="width:100%;min-height:300px;">
									
										<form class="form-horizontal" id="validation-form" action="http://192.168.1.42:8080/shop-pc/findPwd" method="post" novalidate="novalidate">
											<h6 class="form_title"><span>忘记密码</span></h6>
											<div class="form_group">
												<div class="form_item">
													<label><span>*</span>会员账号</label>
													<input id="username" name="username" class="tex_input" value="">
												</div>
					
												<div class="form_item">
													<label><span>*</span>新密码</label>
													<input id="password" name="password" type="password" class="tex_input" value="">
												</div>
					
												<div class="form_item">
													<label><span>*</span>确认密码</label>
													<input id="confirm_password" name="confirm_password" type="password" class="tex_input" value="">
												</div>
					
												<div class="form_item">
													<label><span>*</span>验证码</label> 
													<input class="tex_code" id="random" name="random" value="">
													<button class="btn_code" type="button">获取验证码</button>
												</div>
					
												<div class="form_item">
													<label></label>
													<p>这里需要通过手机接收短信验证码,验证您的身份.</p>
												</div>
					
												<div class="form_item" style="text-align:center">
													<button id="regBtn" class="btn_submit">保存</button>
												</div>
											</div>
										</form>
				
									</div>
				
				
								</div>
								<span class="clr"></span>
							</div>
						</div>
					</div>
			</div>
		</div>
	</div>
	<!-- container end -->
   
	 <%@ include  file="../footer.jsp"%>
	 <script src="${resources}/plugins/jquery-validation/jquery.validate.min.js"></script>
     <script src="${resources}/plugins/jquery-validation/messages_zh.min.js"></script>
     <script src="${resources}/js/common.js"></script>
	 <script type="text/javascript">
	 
	 $('#validation-form').validate({
			errorElement: 'div',
			errorClass: 'message_error',
			focusInvalid: false,
			rules: {
				username: "required",
				password: {
					required: true,
					minlength: 6
				},
				confirm_password: {
			    	required: true,
					equalTo: "#password"
			   },
			   random:{
			   		required: true
			   }
			},
			messages: {
				
			   username: "<span>*</span>请输入账号",
				
			   password: {
					required: "<span>*</span>请输入密码",
					minlength: "<span>*</span>密码不能少于6个字"
			   },
			   confirm_password: {
					required: "<span>*</span>请输入确认密码",
					equalTo: "<span>*</span>两次输入密码不一致"
			   },
			   random: {
					required: "<span>*</span>请输入验码"
				 
			   }
			},
	
	
			highlight: function (e) {
				$(e).closest('.form-group').removeClass('has-info').addClass('has-error');
			},
	
			success: function (e) {
				$(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');
				$(e).remove();
			},
	
			errorPlacement: function (error, element) {
				if(element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
					var controls = element.closest('div[class*="col-"]');
					if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
					else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
				}
				else if(element.is('.select2')) {
					error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
				}
				else if(element.is('.chosen-select')) {
					error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
				}
				
				else error.appendTo(element.parent());
			},
	
			submitHandler: function (form) {
				//屏蔽插件提交,使用页面ajax提交	
				//form.submit();
			},
			invalidHandler: function (form) {
			}
		});
		 
	
$(document).ready(
	 		function() {   
	 			
	 			
	 			  //点击获取验证码
	 			  $(".btn_code").click(function(){
	 				  var tel = $('#username').val();
	 				  if(validation(tel)){
	 						//获取验证码
	 						getCode(tel);
	 						//启动计时器
	 						timeOut();
	 					}else{
	 						alertSuccess('请输入正确的手机号码');
	 					}
	 					
	 				  
	 			  });
	 		 
	 			  
	 			  
	 			  
		 /* ---------------- 验证用户名为手机号 ---------------- */
			function validation(tel){
			  reg=/^1[3|4|5|7|8]\d{9}$/;
			  return reg.test(tel);
			}
	 			 
		/* 获取验证码 */
		   function getCode(tel){ 
			    var url = "${path}/message/verifycode";
				$.post(url,{"username":tel},function(data){
					alertSuccess(data.msg);  
				});   
			   
		   }		 
	 			 
		 /* ---------------- 计时器 ---------------- */
		var count = 60;
		var timmer;
		function timeOut(){
			count--;
			if(count > 0){
				$('.btn_code').attr("disabled","disabled")
				$('.btn_code').text('('+count+')重新获取');
				timmer = setTimeout(timeOut, 1000);
			}else{
				count = 60;
				clearTimeout(timmer);
				$('.btn_code').removeAttr("disabled");
				$('.btn_code').text("获取验证码");
			}
		}
		
		
		 /* 点击注册 */
	     $("#regBtn").click(function(){
	    	 
	    	 var tel = $('#username').val();
	   	    if(validation(tel)){
	   			 
	   		}else{
	   			alertSuccess('请输入正确的手机号码');
	   			return;
	   		}
	    	 
	    	 if($('#validation-form').valid()){
	    		
	    		 $.ajax({
						type:"post",
						url:"${path}/backPwd",
						data:$("#validation-form").serialize(),
						success:function(result){
							if(result.code==200){
								//alertSuccess("设置成功");
								common.alert({
									content:'设置成功，是否去登陆？',
									cancelValue:'取消',
									ok:function(){
										window.location.href="${path}/login";
									}
								})
								//window.location.href="${path}/login";
							}else{ 
								 _letsun_show_msg("red",result.msg,3000);
							}
						},
						error: function(XMLHttpRequest, textStatus, errorThrown) {
							_letsun_show_msg("red","网络异常",3000);
		               	}
		            })
	    	 }
	    	 
	     });
	     
	 			    
  })
	 </script>
</body>
	
</html>
